<template>
	<view>
		<view class="cu-list menu-avatar">
			<view v-if="carts.length===0" class="text-center margin-top-100">
				<text class="cuIcon-cart text-gray"></text>
				<view class="text-gray">你的购物车空空如也~~</view>
			</view>
			<view v-else class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in carts" :key="index"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
				<view class="cu-avatar radius" :style="'background-image:url('+item.url+'_200_200);'"></view>
				<view class="content">
					<view class="title">{{item.name}}</view>
					<view class="text-gray text-sm">
						<view class=""> 规格：{{item.speTitle}}</view>
					</view>
					<view class="bg-white price">
						<view class="text-red text-xl fl margin-top-20">
							￥{{item.price}}
						</view>
						<view class="fr margin-bottom-10">
							<uni-number-box :value="item.buyCount" @change="changeNum(item,$event)"/>
						</view>
					</view>
				</view>
				<view class="move">
					<view class="main-bg-color" @click="delCart(item)">删除</view>
				</view>
			</view>
		</view>
		<view class="foot-bar margin-bottom-20" v-if="carts.length>0">
			<view class="cu-bar bg-white border tabbar shop">
				<text class="margin-left-50">
					<text class="text-xs margin-right-10">不含运费</text>
					<text class="text-bold text-xxl">合计:</text>
					<text class="text-red">￥{{totalPrice}}</text>
				</text>
				<button :disabled="loading" type="primary" class="cu-btn bg-red round shadow-blur lg margin-right-50" @click="confirmOrder">结算({{carts.length}})</button>
			</view>
		</view>
	</view>
</template>
<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import {CartService} from "@/api/OrderService.js"

	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				modalName: null,carts: [],totalPrice: 0,loading:false
			};
		},
		onPullDownRefresh() {
			this.initList();
			uni.stopPullDownRefresh();
		},
		onShow() {
			this.initList();
		},
		watch: {
			carts(newVal, oldVal) {
				this.totalPrice=0;
				if (newVal && newVal.length>0) {
					newVal.forEach(cart=>{
						this.totalPrice+=cart.buyCount*cart.price;
					});
				}
				this.totalPrice=this.totalPrice.toFixed(2);
			}
		},
		methods: {
			confirmOrder() {
				const that=this;
				that.loading=true;
				uni.navigateTo({
					url: "/pages/cart/confirm",
					success:function(res){
						res.eventChannel.emit('sendProducts', that.carts);
					},complete:function(){
						that.loading=false;
					}
				})
			},
			initList() {
				CartService.listCart().then(res => {
					this.carts = res;
				});
			},
			changeNum(item,e){
				if(parseInt(item.buyCount)!==parseInt(e)){
					item.buyCount=parseInt(e);
					CartService.addCart(item).then(()=>{
						this.initList();
					});
				}
			},
			delCart(item){
				CartService.delCart(item.productId,item.sn).then(()=>{
					this.initList();
				});
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style lang="scss">
	.cuIcon-cart{font-size:7em;}
	.cu-item:last-child{margin-bottom: 200rpx;}
	.cu-item {
		height: 100% !important;
		.cu-avatar {
			width: 200rpx;
			height: 200rpx;
		}

		.content {
			left: 250rpx !important;
			margin-top: 20rpx;
			position:unset !important;
			.price {
				clear: both;
				margin-top: 20rpx;
				bottom: 20px;
				width: 100%;
			}
		}
	}

	.foot-bar {
		position: fixed;
		width: 100%;
		bottom: 0;
		.cu-bar {
			background: #e3f5ca;
		}
	}
</style>
